<template>
  <div class="system-container">
    <el-row type="flex" justify="end" class="row" :gutter="15">
      <el-col class="col" :span="3">
        <el-card>
          <div class="system-title">个人中心</div>
          <div class="config-menu">
            <div
              v-for="(item, index) in configMenu"
              :key="index"
              class="config-menu-item"
              :class="activedIndex === index ? 'config-menu-item__actived' : ''"
              @click="switchConfig(index)"
            >
              <img
                :src="activedIndex === index ? item.check : item.nocheck"
                alt=""
              />
              <div class="config-menu-item__title">
                {{ item.title }}
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="21">
        <div class="system-right">
          <el-card>
            <PageCard :title="configTitle"></PageCard>
            <BasicInfo v-show="activedIndex === 0" ref="basicInfo" />
            <SetPassword v-show="activedIndex === 1" />
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CommonTitle from "./components/commonTitle.vue";
import BasicInfo from "./components/basicInfo.vue";
import SetPassword from "./components/setPassword.vue";
export default {
  name: "System",
  components: {
    CommonTitle,
    BasicInfo,
    SetPassword,
  },
  data() {
    return {
      searchForm: {},
      activedIndex: 0,
      configMenu: [
        {
          title: "个人信息",
          nocheck: require("@/assets/images/user-icon1.png"),
          check: require("@/assets/images/user-icon1-check.png"),
        },
        {
          title: "修改密码",
          nocheck: require("@/assets/images/user-icon2.png"),
          check: require("@/assets/images/user-icon2-check.png"),
        },
      ],
    };
  },
  computed: {
    configTitle() {
      switch (this.activedIndex) {
        case 0:
          return "基本设置";
        case 1:
          return "修改密码";
        default:
          return "";
      }
    },
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.$refs.basicInfo.imgInit();
    });
  },
  methods: {
    switchConfig(index) {
      if (this.activedIndex !== index) {
        this.activedIndex = index;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/styles/variables";
.system-container {
  padding: 0px;
  .el-row {
    width: 100%;
    height: 100%;
    .el-col {
      height: 100%;
      .el-card {
        height: 100%;
        overflow-y: auto;
        .system-title {
          font-size: 18px;
          //text-align: center;
          color: var(--theme);
          margin-bottom: 30px;
        }
      }
    }
  }
}

.config-menu {
  display: flex;
  flex-direction: column;
  //margin-left: 15px;
  &-item {
    cursor: pointer;
    margin-bottom: 27px;
    height: 40px;
    border-radius: 4px;
    color: var(--theme);
    border: 1px solid #5699f1;
    display: flex;
    align-items: center;
    justify-content: center;
    &__title {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 400;
      padding-left: 10px;
    }
    &__actived {
      color: #fff;
      background: var(--theme);
    }
  }
}
.system-right {
  height: 100%;
  overflow-y: auto;
  @include scrollBar();
}
.system-right ::v-deep .el-card__body {
  padding: 20px 50px;
}
.title {
  font-size: 22px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  margin-bottom: 56px;
}
</style>
